﻿@*
    工序添加/编辑页面
*@
@{
    var isEmbed = Context?.Request?.Query["embed"].ToString() == "1";
    Layout = isEmbed ? null : "_Layout";
    ViewData["Title"] = "工序管理";
}

<link href="~/css/site.css" rel="stylesheet" />
<link href="~/layui/css/layui.css" rel="stylesheet" />
<script src="~/js/site.js"></script>
<script src="~/layui/layui.js"></script>
<script src="~/js.cookie.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

<style>
    /* 全页面布局样式 */
    body {
        margin: 0;
        padding: 0;
        background: #f5f5f5;
        min-height: 100vh;
    }

    /* 主容器全屏样式 */
    .full-page-container {
        width: 100%;
        min-height: 100vh;
        background: #f5f5f5;
        padding: 20px;
        box-sizing: border-box;
    }

    /* 表单卡片样式 */
    .form-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.1);
        padding: 30px;
        margin: 0 auto;
        max-width: 1200px;
        min-height: calc(100vh - 80px);
        box-sizing: border-box;
    }

    /* 页面标题样式 */
    .page-title {
        font-size: 20px;
        font-weight: bold;
        color: #333;
        margin-bottom: 30px;
        padding-bottom: 15px;
        border-bottom: 2px solid #1e88e5;
        text-align: center;
    }

    /* 表单区域样式 */
    .form-section {
        margin-bottom: 30px;
    }

    /* 生成按钮样式 */
    .layui-input-group .layui-btn-sm {
        height: 32px;
        line-height: 32px;
        padding: 0 12px;
        font-size: 12px;
        border-radius: 0 4px 4px 0;
        border: 1px solid #1E9FFF;
        background: #1E9FFF;
        color: white;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        vertical-align: middle;
    }

    .layui-input-group .layui-btn-sm:hover {
        background: #0D8AE6;
        border-color: #0D8AE6;
        transform: scale(1.05);
    }

    /* 按钮内图标和文字居中 */
    .layui-input-group .layui-btn-sm i {
        margin-right: 4px;
        font-size: 12px;
        line-height: 1;
        vertical-align: middle;
    }

    .layui-input-group .layui-btn-sm span {
        line-height: 1;
        vertical-align: middle;
    }

    /* 状态图标样式 */
    #codeStatusIcon {
        transition: all 0.3s ease;
        animation: fadeIn 0.5s ease-in;
    }

    @@keyframes fadeIn {
        from { opacity: 0; transform: scale(0.8); }
        to { opacity: 1; transform: scale(1); }
    }

    /* 操作按钮区域样式 */
    .action-buttons {
        margin-top: 40px;
        padding: 20px 0;
        text-align: center;
        border-top: 1px solid #e0e0e0;
        background: #fafafa;
        border-radius: 0 0 8px 8px;
        position: relative;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .action-buttons .layui-btn {
        margin: 0;
        padding: 12px 30px;
        font-size: 14px;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-width: 120px;
    }

    .action-buttons .layui-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    .action-buttons .layui-btn i {
        font-size: 14px;
    }

    /* 响应式按钮布局 */
    @@media (max-width: 768px) {
        .action-buttons {
            flex-direction: column;
            gap: 15px;
        }
        
        .action-buttons .layui-btn {
            width: 100%;
            max-width: 200px;
        }
    }

    /* 表单字段间距优化 */
    .layui-form-item {
        margin-bottom: 25px;
    }

    /* 输入框样式优化 */
    .layui-input, .layui-select, .layui-textarea {
        border-radius: 4px;
        border: 1px solid #ddd;
        transition: all 0.3s ease;
    }

    .layui-input:focus, .layui-select:focus, .layui-textarea:focus {
        border-color: #1e88e5;
        box-shadow: 0 0 0 2px rgba(30,136,229,0.2);
    }

    /* 响应式设计 */
    @@media (max-width: 768px) {
        .full-page-container {
            padding: 10px;
        }
        
        .form-card {
            padding: 20px;
            margin: 0;
        }
        
        .button-section .layui-btn {
            display: block;
            width: 100%;
            margin: 10px 0;
        }
    }
</style>

<div class="full-page-container">
    <div class="form-card">
        <!-- 页面标题 -->
        <div class="page-title">
            <i class="layui-icon layui-icon-form" style="margin-right: 10px; color: #1e88e5;"></i>
            <span id="pageTitle">基础信息</span>
        </div>

        <!-- 表单区域 -->
        <div class="form-section">
            <form class="layui-form" id="processForm">
                <div class="layui-row layui-col-space20">
                    <!-- 左列 -->
                    <div class="layui-col-md6">
                        <!-- 工序编码 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                <span style="color: red;">*</span> 工序编码
                            </label>
                            <div class="layui-input-block">
                                <div class="layui-input-group">
                                    <input type="text" id="processCode" name="processCode" required lay-verify="required" 
                                           placeholder="请输入工序编码或点击生成按钮自动生成" class="layui-input" style="width: 100%; max-width: 300px;">
                                    <div class="layui-input-suffix">
                                        <button type="button" class="layui-btn layui-btn-sm" onclick="generateProcessCode()" style="margin-right: 5px;">
                                            <i class="layui-icon layui-icon-refresh"></i>
                                            <span>生成</span>
                                        </button>
                                        <i class="layui-icon layui-icon-ok" id="codeStatusIcon" style="color: #1E9FFF; font-size: 16px; display: none;"></i>
                                    </div>
                                </div>
                                <div class="layui-form-mid layui-word-aux">系统编号 - 支持手动输入或自动生成</div>
                            </div>
                        </div>

                        <!-- 工序分类 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">所属分类</label>
                            <div class="layui-input-block">
                                <div class="layui-input-group">
                                    <select id="ptId" name="ptId" lay-verify="required">
                                        <option value="">请选择分类</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- 所属部门 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">所属部门</label>
                            <div class="layui-input-block">
                                <div class="layui-input-group">
                                    <select id="department" name="department" lay-verify="required">
                                        <option value="">请选择部门</option>
                                        <option value="1">生产部</option>
                                        <option value="2">质检部</option>
                                        <option value="3">技术部</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- 备注 -->
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">备注</label>
                            <div class="layui-input-block">
                                <textarea id="note" name="note" placeholder="请输入备注" class="layui-textarea" style="height: 80px;"></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- 右列 -->
                    <div class="layui-col-md6">
                        <!-- 工序名称 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                <span style="color: red;">*</span> 工序名称
                            </label>
                            <div class="layui-input-block">
                                <input type="text" id="processName" name="processName" required lay-verify="required" 
                                       placeholder="请输入工序名称" class="layui-input" style="width: 100%; max-width: 300px;">
                            </div>
                        </div>

                        <!-- 负责人 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">负责人</label>
                            <div class="layui-input-block">
                                <div class="layui-input-group">
                                    <select id="responsibilityId" name="responsibilityId" lay-verify="required">
                                        <option value="">请选择负责人</option>
                                        <option value="张伟">张伟</option>
                                        <option value="李娜">李娜</option>
                                        <option value="王强">王强</option>
                                    </select>
                                    <div class="layui-input-suffix">
                                        <i class="layui-icon layui-icon-add-1" style="color: #666; cursor: pointer;" onclick="addNewPerson()"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 状态 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="radio" name="processStatus" value="0" title="启用" checked>
                                <input type="radio" name="processStatus" value="1" title="禁用">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 操作按钮区域 -->
                <div class="action-buttons">
                    <button type="button" class="layui-btn layui-btn-normal" onclick="saveProcessData()">
                        <i class="layui-icon layui-icon-ok"></i>
                        <span id="saveButtonText">保存</span>
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary" onclick="goBackToProcess()">
                        <i class="layui-icon layui-icon-return"></i>
                        <span>返回</span>
                    </button>
                </div>

            </form>
        </div>
    </div>
</div>

<script>
    // 全局变量
    var isEditMode = false;
    var editData = null;

    // 页面加载完成后执行
    $(function() {
        initLayui();
        checkUrlParams();
        bindEvents();
        
        // 先获取工序分类数据，然后处理编辑数据
        getProcessType();
        
        // 如果不是编辑模式，自动生成一个初始编号
        if (!isEditMode) {
            setTimeout(function() {
                generateProcessCode();
            }, 100);
        }
    });

    // 检查URL参数，判断是添加还是编辑模式
    function checkUrlParams() {
        var urlParams = new URLSearchParams(window.location.search);
        var mode = urlParams.get('mode');
        var data = urlParams.get('data');
        
        if (mode === 'edit' && data) {
            try {
                isEditMode = true;
                editData = JSON.parse(decodeURIComponent(data));
                
                // 更新页面标题和按钮文字
                $('#pageTitle').text('编辑工序');
                $('#saveButtonText').text('更新');
                
                console.log('编辑模式，数据已获取:', editData);
                
                // 等待工序分类数据加载完成后再回填表单
                setTimeout(function() {
                    fillFormData(editData);
                }, 200);
                
            } catch (e) {
                console.error('解析编辑数据失败:', e);
                layui.use('layer', function(){
                    var layer = layui.layer;
                    layer.msg('数据解析失败，请重试', {icon: 2, time: 2000});
                });
            }
        } else {
            // 添加模式
            isEditMode = false;
            $('#pageTitle').text('添加工序');
            $('#saveButtonText').text('保存');
            console.log('添加模式');
        }
    }

    // 回填表单数据
    function fillFormData(data) {
        console.log('开始回填表单数据:', data);
        
        $('#processCode').val(data.processCode);
        $('#processName').val(data.processName);
        $('#note').val(data.note);
        $('#responsibilityId').val(data.responsibilityName);
        $('#department').val(data.departId);
        
        // 设置状态单选按钮
        if (data.processStatus === false) {
            $('input[name="processStatus"][value="0"]').prop('checked', true);
        } else {
            $('input[name="processStatus"][value="1"]').prop('checked', true);
        }
        
        // 设置工序分类（确保下拉框已加载）
        if (data.ptId) {
            console.log('设置工序分类ID:', data.ptId);
            $('#ptId').val(data.ptId);
        }
        
        // 重新渲染表单
        layui.form.render();
        
        // 显示编码状态
        if (data.processCode && data.processCode.startsWith('PCR')) {
            showCodeStatus(true);
        }
        
        console.log('表单数据回填完成');
    }

    // 初始化Layui
    function initLayui() {
        layui.use(['form', 'layer'], function() {
            var form = layui.form;
            var layer = layui.layer;
            
            // 表单初始化完成
            console.log('Layui表单已初始化');
        });
    }

    // 绑定事件
    function bindEvents() {
        // 工序编码输入框事件
        $('#processCode').on('input', function() {
            var code = $(this).val().trim();
            if (code !== '') {
                // 验证编码格式
                if (code.length >= 3 && code.startsWith('PCR')) {
                    showCodeStatus(true);
                } else {
                    showCodeStatus(false);
                }
            } else {
                hideCodeStatus();
            }
        });

        // 工序编码输入框失去焦点时验证
        $('#processCode').on('blur', function() {
            var code = $(this).val().trim();
            if (code === '') {
                // 如果不是编辑模式且为空，自动生成一个编号
                if (!isEditMode) {
                    generateProcessCode();
                }
            } else {
                // 验证编码格式
                validateProcessCode(code);
            }
        });

        // 工序编码输入框获得焦点时
        $('#processCode').on('focus', function() {
            var code = $(this).val().trim();
            if (code !== '') {
                validateProcessCode(code);
            }
        });
    }

    // 验证工序编码格式
    function validateProcessCode(code) {
        if (code.length >= 3 && code.startsWith('PCR')) {
            showCodeStatus(true);
        } else {
            showCodeStatus(false);
            // 显示格式错误提示
            layui.use('layer', function() {
                var layer = layui.layer;
                layer.msg('工序编码格式应为PCR开头加数字', {icon: 2, time: 3000});
            });
        }
    }

    // 生成工序编码
    function generateProcessCode() {
        // 生成PCR开头的5位随机数编号
        var random = Math.floor(Math.random() * 100000).toString().padStart(5, '0');
        var processCode = 'PCR' + random;
        
        $('#processCode').val(processCode);
        
        // 显示成功状态图标
        showCodeStatus(true);
        
        // 显示提示信息
        layui.use('layer', function() {
            var layer = layui.layer;
            layer.msg('工序编码已生成：' + processCode, {icon: 1, time: 2000});
        });
    }

    // 显示/隐藏编码状态图标
    function showCodeStatus(isValid) {
        var icon = $('#codeStatusIcon');
        if (isValid) {
            icon.show().removeClass('layui-icon-close').addClass('layui-icon-ok');
            icon.css('color', '#1E9FFF');
        } else {
            icon.show().removeClass('layui-icon-ok').addClass('layui-icon-close');
            icon.css('color', '#FF5722');
        }
    }

    // 隐藏编码状态图标
    function hideCodeStatus() {
        $('#codeStatusIcon').hide();
    }

    // 添加新负责人
    function addNewPerson() {
        layui.use('layer', function() {
            var layer = layui.layer;
            layer.msg('添加负责人功能开发中...', {icon: 1});
        });
    }

    // 工序保存数据
    function saveProcessData() {
        // 获取表单数据
        var formData = {
            processCode: $('#processCode').val().trim(),
            processName: $('#processName').val().trim(),
            ptId: $('#ptId').val(),
            departId: $('#department').val(),
            note: $('#note').val().trim(),
            responsibilityName: $('#responsibilityId').val(),
            processStatus: $('input[name="processStatus"]:checked').val()
        };
        
        // 如果是编辑模式，添加ID字段
        if (isEditMode && editData) {
            formData.id = editData.id;
            formData.isUpdOrDel = false; // false表示修改
        }
        
        console.log('准备保存的表单数据：', formData);
        
        // 表单验证
        if (!formData.processCode || !formData.processName || !formData.ptId ||
            !formData.responsibilityName || !formData.departId) {
            layui.use('layer', function() {
                var layer = layui.layer;
                layer.msg('请填写必填字段', {icon: 2, time: 3000});
            });
            return;
        }

        // 验证工序编码格式
        if (!formData.processCode.startsWith('PCR')) {
            layui.use('layer', function() {
                var layer = layui.layer;
                layer.msg('工序编码格式应为PCR开头加数字', {icon: 2, time: 3000});
            });
            return;
        }

        // 显示加载提示
        layui.use('layer', function() {
            var layer = layui.layer;
            var loadIndex = layer.load(1, {shade: [0.3, '#000']});
            
            // 根据模式选择不同的API
            var apiUrl = isEditMode ? 'http://localhost:5161/api/Process/ProcessEdit' : 'http://localhost:5161/api/Process/ProcessAdd';
            var successMsg = isEditMode ? '工序更新成功' : '工序添加成功';
            
            $.ajax({
                url: apiUrl,
                dataType: 'json',
                type: 'post',
                contentType: 'application/json',
                data: JSON.stringify(formData),
                success: function(res) {
                    layer.close(loadIndex);
                    if (res.code === 200) {
                        layer.msg(successMsg, {icon: 1, time: 2000}, function() {
                            // 返回工序管理页面
                            window.location.href = '/Process/Process';
                        });
                    } else {
                        layer.msg('保存失败：' + res.message, {icon: 2, time: 3000});
                    }
                },
                error: function() {
                    layer.close(loadIndex);
                    layer.msg('请求失败，请稍后重试', {icon: 2, time: 3000});
                }
            });
        });
    }

    // 返回工序管理
    function goBackToProcess() {
        layui.use('layer', function() {
            var layer = layui.layer;
            layer.confirm('确定要返回工序管理页面吗？未保存的数据将丢失。', {
                icon: 3,
                title: '确认返回',
                btn: ['确定返回', '取消']
            }, function(index) {
                layer.close(index);
                // 返回工序管理页面
                window.location.href = '/Process/Process';
            });
        });
    }

    //工序分类下拉框
    function getProcessType(){
        $.ajax({
            url: 'http://localhost:5161/api/Process/ProcessTypeQuery',
            dataType:'json',
            type:'get',
            contentType:'application/json',
            async:false,
            success:res=>{
                console.log(res);
                if(res.code==200){
                    // 清空现有选项
                    $("#ptId").empty();
                    // 添加默认选项
                    $("#ptId").append('<option value="">请选择分类</option>');
                    
                    $(res.data.list).each(function(){
                        $("#ptId").append(`
                            <option value="${this.id}">${this.ptName}</option>
                        `)
                    })
                    
                    // 如果是编辑模式，设置选中的分类
                    if (isEditMode && editData) {
                        console.log('设置选中的分类ID:', editData.ptId);
                        $('#ptId').val(editData.ptId);
                        
                        // 延迟一下再渲染，确保值设置完成
                        setTimeout(function() {
                            layui.form.render('select');
                            console.log('下拉框已渲染，当前选中值:', $('#ptId').val());
                        }, 100);
                    } else {
                        // 非编辑模式直接渲染
                        layui.form.render('select');
                    }
                }else{
                    layer.msg(res.message)
                }
            }
        })
    }
</script>
